<template>
  <div class="handleshou">  
     <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item class="banner-container" v-for="banImg in banners" :key="banImg.targetId">
      <img class="medium" :src="banImg.imageUrl" :alt="banImg.typeTitle" />
    </el-carousel-item>
  </el-carousel>
    <!-- <div>
      <img class="imageimage" :key="banImg.targetId"   />
    </div> -->

    <div class="recommendContainerarr">
      <!-- 左边 -->
      <div class="recommendLEFT">
        <RecommendDetail />
        <!-- 右边 -->
      </div>
      <div class="recommendLeft">
        <Recommend />
      </div>
    </div>
  </div>
</template>

<script>
// import Swiper from 'swiper'
// import 'swiper/swiper.min.css'
import { getTopBanners } from '@/api/RecommendList'
import Recommend from './components/Recommend.vue'
import RecommendDetail from './components/RecommendDetail.vue'

export default {
  name: 'RecommendDT',
  data() {
    return {
      banners: ''
    }
  },
  components: {
    Recommend,
    RecommendDetail
  },
  async mounted() {
    const { banners } = await getTopBanners()
    this.banners = banners
  },

}
</script>

<style lang="less" scoped>
.handleshou {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}
.recommendContainerarr {
  margin: 0 auto;
  width: 980px;
  background-color: #fff;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  display: flex;
}

.recommendLEFT {
  background-color: #fff;
  width: 689px;
  border-right: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
  padding: 20px 20px 40px;
}
.recommendLeft {
  width: 210px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .banner-container{
    img{
      // width: ;
      height: 300px;
    }
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
